<template>
    <el-card class="personal-progress">
      <template #header>
        <div class="card-header">
          <h2>个人论文进度</h2>
        </div>
      </template>
      <h3>{{ thesis.title }}</h3>
      <el-steps :active="thesis.currentStep" finish-status="success">
        <el-step v-for="step in thesis.steps" :key="step.id" :title="step.name" />
      </el-steps>
      <el-progress :percentage="progressPercentage" :format="formatProgress" class="progress-bar" />
    </el-card>
  </template>

  <script setup>
  import { computed } from 'vue'
  import { ElCard, ElSteps, ElStep, ElProgress } from 'element-plus'

  const props = defineProps({
    thesis: {
      type: Object,
      required: true
    }
  })

  const progressPercentage = computed(() => {
    return (props.thesis.currentStep / props.thesis.totalSteps) * 100
  })

  const formatProgress = (percentage) => {
    return `${percentage.toFixed(0)}% (${props.thesis.currentStep}/${props.thesis.totalSteps}步)`
  }
  </script>

  <style scoped>
  .personal-progress {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .progress-bar {
    margin-top: 20px;
  }
  </style>